<template>
  <el-form :model="dom" label-width="80px">
    <el-form-item label="ID">
      <el-input :value="dom.id" disabled style="width: 130px"></el-input>
    </el-form-item>
    <el-form-item label="图层">
      <el-input-number v-model.number="dom.sort" disabled></el-input-number>
    </el-form-item>
    <el-form-item label="类型">
      <el-input value="按钮元素" disabled style="width: 130px"></el-input>
    </el-form-item>
    <el-form-item label="距左">
      <el-input-number v-model.number="dom.left"></el-input-number>
    </el-form-item>
    <el-form-item label="距顶">
      <el-input-number v-model.number="dom.top"></el-input-number>
    </el-form-item>
    <el-form-item label="宽度">
      <el-input-number v-model.number="dom.width"></el-input-number>
    </el-form-item>
    <el-form-item label="高度">
      <el-input-number v-model.number="dom.height"></el-input-number>
    </el-form-item>
    <el-form-item label="Index">
      <el-input-number v-model.number="dom.index"></el-input-number>
    </el-form-item>
    <el-form-item label="按钮类型">
      <el-select
        v-model="dom.button_type"
        style="width: 130px"
        placeholder="选择按钮类型"
        @change="handleButtonTypeChange"
      >
        <el-option
          v-for="item of buttonTypes"
          :key="item.value"
          :label="item.title"
          :value="item.value"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="跳转类型">
      <el-select
        v-model="dom.link_type"
        clearable
        style="width: 130px"
        placeholder="请选择跳转"
      >
        <el-option
          v-for="item of linkTypes"
          :key="item.value"
          :label="item.title"
          :value="item.value"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="跳转" label-width="50px">
      <el-input
        v-model.trim="dom.link"
        resize="none"
        type="textarea"
        style="width: 160px"
      ></el-input>
    </el-form-item>
    <el-form-item label="聚焦距左">
      <el-input-number v-model.number="dom._focus_left"></el-input-number>
    </el-form-item>
    <el-form-item label="聚焦距顶">
      <el-input-number v-model.number="dom._focus_top"></el-input-number>
    </el-form-item>
    <el-form-item label="聚焦Index">
      <el-input-number v-model.number="dom.focus_index"></el-input-number>
    </el-form-item>
    <el-form-item label="添加图片">
      <el-button
        type="primary"
        round
        :disabled="!dom.type"
        @click="handleImageEdit"
      >
        添加/修改图片
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  import mixin from '@/views/editor/mixin.js'
  import { linkTypes, buttonTypes } from '@/views/editor/config.js'
  export default {
    name: 'ButtonForm',
    components: {},
    mixins: [mixin],
    data() {
      return {
        root: {
          dom: {},
        },
        linkTypes,
        buttonTypes,
      }
    },
    computed: {
      dom() {
        return this.root.dom || {}
      },
      doms() {
        return this.root.doms || []
      },
      routes() {
        return this.root.routes || {}
      },
    },
    methods: {
      handleButtonTypeChange(type) {
        const doms = this.doms.filter((item) => item.button_type === 'back')
        if (type === 'back' && doms.length > 1) {
          this.$baseAlert('页面中只能有一个返回按钮类型', '温馨提示', () => {
            this.dom.button_type = 'normal'
          })
        } else if (type === 'back' && doms.length === 1) {
          delete this.routes[this.dom.id]
          this.routes['focus_card_back'] = {
            left: '',
            right: '',
            up: '',
            down: '',
          }
          this.dom.id = 'focus_card_back'
        }
      },
      handleImageEdit() {
        this.root.$refs['image-edit'].showEdit()
      },
    },
  }
</script>
